<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/fun.css" />
    <link rel="stylesheet" type="text/css" href="css/animation.css" />
    <link rel="stylesheet" type="text/css" href="css/button.css" />
    <link rel="stylesheet" type="text/css" href="css/login.css" />
    <title>功能</title>


    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
    .i_box>img{
        opacity: 0;
        transition:opacity 4s;
    }
    .opc{
        opacity:1 !important;
    }


    .lazyload{
        width:100%;
    }
</style>



<body>
    <div class="web">
        <header>
            <section><img src="images/logo_03.jpg"></section>
            <section><img src="images/logo.jpg"></section>
            <nav class="btn_nav">
                <span></span>
                <span></span>
                <span></span>
             </nav>
            <ul class="nav">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="video.html">视频</a></li>
                    <li class="border_san"><a href="fun.html">功能</a></li>
                    <li><a href="consult.html">咨询</a></li>
                    <li><a href="actor.html">名伶</a></li>
                    <li class="toggle_btn">登录</li>
            </ul>
    </header>
    <div class="title_bg">
        <img src="images/biaoti.png">
        <h1>功能<span>展示</span></h1>       
    </div>
  
    <article class="content"> 
            <section>
                    <article class="imgbox">
                            <img class="lazyload opc" src="images/fun1.png">
                    </article>
                    <aside>
                        <h1>01</h1>
                        <p>首页每天推荐一些新姿势
                           来让我们了解粤剧</p>
                        <a href="Recommend.html">了解更多</a>
                    </aside>
            </section>
            <div class="line">
                <img src="images/lineA_03.jpg">
            </div>
            <section>
                    <aside>
                        <h1>02</h1>
                        <p>不同的学习系统，文字
                                还是音乐形式</p>
                                <a href="Recommend.html">了解更多</a>
                    </aside>
                    <article class="imgbox2 i_box">
                            <img class="lazyload" data-src="images/fun2.png">
                    </article>
            </section>

            <section>
                    <article class="imgbox i_box">
                            <img class="lazyload" data-src="images/fun3.png">
                    </article>
                    <aside>
                        <h1>03</h1>
                        <p>强大的音乐系统，让你的
                                发音更加准确</p>
                                <a href="Recommend.html">了解更多</a>
                    </aside>
            </section>
            <div class="line">
                    <img src="images/lineA_03.jpg">
                </div>
            <section>
                    <aside>
                        <h1>04</h1>
                        <p>根据智能判断你的唱段，
                                能否达标</p>
                                <a href="Recommend.html">了解更多</a>
                    </aside>
                    <article class="imgbox2 i_box">
                            <img class="lazyload" data-src="images/fun4.png">
                    </article>
            </section>
        
    </article>
    <footer>
        <img src="images/footer_02.jpg">
        <aside>
            <p>关注我们 & 让我们变得更好<span><img src="images/code.png"></span></p>
            <input type="text">
            <span>sumbit</span> 
        </aside> 
   </footer>
    </div>

    <!--登录-->
    <div class="login">
            <article>
                    <section class="login_left">
                            <img src="images/dl_03.jpg">
                    </section>
                     <form class="login_right login_box">
                            <h3>登录</h3>
                            <input type="text" placeholder="请输入用户名/手机号" required>
                            <input type="password" placeholder="请输入密码" required minlength="8" maxlength="15" required/><br>
                            <input type="submit" value="确认登录">
                            <p>还没注册？去<span class="reg_btn">注册</span></p>
                    </form> 
                    <form class="login_right register">
                        <h3>注册</h3>
                        <input type="text" placeholder="请输入手机号注册" required>
                        <input  placeholder="请输入密码"  type="password" minlength="8" maxlength="15" required/><br>
                        <input  placeholder="请确认密码"  type="password" minlength="8" maxlength="15" required/><br>
                        <input type="submit" value="确认注册">
                        <p>注册完成？去<span class="login_btn">登录</span></p>
                </form>
            </article>
            <span class="back">返回</span>
    </div>
</body>
<script src="js/response.js"></script>
<script src="js/logres.js"></script>
<script src="js/nav.js"></script>
<script src="js/lazy.js"></script>

<script>

</script>

</html>